<template>
  <div>
      <div>
        <span style="font-weight: 600;">预估覆盖数：</span>
        <a-tooltip title="根据头条、抖音、西瓜、抖音火山版、穿山甲、穿山甲-精选休闲游戏等广告位展示量计算得出，大于1万时，默认展示最小值">
          <a-icon type="question-circle" style="margin-left:10px;" />
        </a-tooltip>
      </div>
      <div class="indicator-wrap">
        <div class="ad-audience-estimate-cover-text">
          <span>今日头条：</span>
          <span>{{ estimateData.toutiao ? util_rounding(estimateData.toutiao.num) : 0 }} </span>
        </div>
        <div class="ad-audience-estimate-cover-text">
          <span>抖音短视频：</span>
          <span>{{ estimateData.aweme ? util_rounding(estimateData.aweme.num) : 0 }} </span>
        </div>
        <div class="ad-audience-estimate-cover-text">
          <span>西瓜视频：</span>
          <span>{{ estimateData.video_app ? util_rounding(estimateData.video_app.num) : 0 }} </span>
        </div>
        <div class="ad-audience-estimate-cover-text">
          <span>抖音火山版：</span>
          <span>{{ estimateData.hotsoon ? util_rounding(estimateData.hotsoon.num) : 0  }} </span>
        </div>
      </div>

      <div style="margin-top:10px;">
        <span>已选定向信息</span>
        <div v-if="estimateAudience.district && estimateAudience.district !== 'NONE' ">
          地域类型：{{ estimateAudience.district === 'CITY' ? '省级' : '' }}
        </div>
        <div class="citys" v-if="estimateAudience.district !== 'NONE' &&  estimateAudience.city ">
          地域：{{ handleAudience('city',estimateAudience.city,this.citys ) }}
        </div>
        <div v-if=" estimateAudience.gender ">
          性别：{{ estimateAudience.gender === 'GENDER_MALE' ? '男' : '女' }}
        </div>
        <div  v-if=" estimateAudience.age ">
          年龄：{{ handleAudience('array',estimateAudience.age,this.$global.audienceAgeBetween ) }}
        </div>
        <div  v-if=" estimateAudience.carrier " >
          运营商：{{ handleAudience('array',estimateAudience.carrier,this.$global.audienceCarrier ) }}
        </div>
        <div  v-if=" estimateAudience.ac ">
          网络：{{ handleAudience('array',estimateAudience.ac,this.$global.audienceAc ) }}
        </div>
        <div  v-if=" estimateAudience.platform ">
          平台：{{ handleAudience('array',estimateAudience.platform,this.$global.audiencePlatform ) }}
        </div>
        <div  v-if=" estimateAudience.auto_extend_targets ">
          智能放量定向：{{ handleAudience('array',estimateAudience.auto_extend_targets,this.$global.autoExtendTargets ) }}
        </div>
        <div  v-if=" estimateAudience.device_brand ">
          手机：{{ handleAudience('array',estimateAudience.device_brand,this.$global.deviceBrand ) }}
        </div>
      </div>
  </div> 
</template>

<script>
import { util_rounding } from '@/utils/util'

export default {
  props:{
    estimateData:{
      type:Object,
      default:()=>{ return {} }
    },
    estimateAudience:{
      type:Object
    },
    citys:{
      type:Array
    }
  },
  data(){
    return {
      util_rounding:v => util_rounding(v)
    }
  },
  methods:{
    // 受众处理
    handleAudience(type,key,value){
      // console.info(type,key,value,'type,key,value')
      if(type === 'array'){
        if( value.length === 0 ) return '不限'
        let arr = []
        value.forEach(ele => {
          if(key.indexOf(ele.value) !== -1){
            arr += `${ele.label}、`
          }
        });
        return arr
      }else if(type === 'city'){
        let arr = ''
        value.forEach(ele => {
          if(key.indexOf(ele.id) !== -1){
            arr += `${ele.name}、`
          }
        });
        return arr
      }
    }
  }
}
</script>

<style scoped lang="less">
  .citys{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    
  }
</style>